<template>
  <el-container class="data-content">
    <el-header>
      <div class="left-panel">
        <el-button type="primary" :icon="Plus" @click="add"></el-button>
        <el-button :icon="Delete" type="danger" @click="showBatchDeleteDialog" :disabled="selectedRows.length === 0">
          批量删除 <span v-if="selectedRows.length > 0">({{ selectedRows.length }})</span>
        </el-button>
        <el-button type="primary" plain :disabled="selectedRows.length!==1" @click="permission">权限设置</el-button>
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-input v-model="searchObject.name" placeholder="角色名称" clearable></el-input>
          <el-button type="primary" :icon="Search" @click="search"></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="nopadding ">
      <el-table ref="table" v-loading="loading" :data="pageData.data" row-key="id"
                @selection-change="handleSelectionChange"
                stripe>
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column label="#" type="index" width="50"></el-table-column>
        <el-table-column label="角色名称" prop="name" width="150"></el-table-column>
        <el-table-column label="别名" prop="alias" width="200"></el-table-column>
        <el-table-column label="排序" prop="sortNum" width="80"></el-table-column>
        <el-table-column label="创建时间" prop="addDate" width="180"></el-table-column>
        <el-table-column label="备注" prop="remark" min-width="150"></el-table-column>
        <el-table-column label="操作" fixed="right" align="right" width="170">
          <template #default="scope">
            <el-button-group>
              <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
              <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
              <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                <template #reference>
                  <el-button text type="primary" size="small">删除</el-button>
                </template>
              </el-popconfirm>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination v-model:current-page="searchObject.no" v-model:page-size="pageData.size"
                       :page-sizes="[10, 20, 50, 100]"
                       pager-count="5" :background="background"
                       layout="total, sizes, prev, pager, next, jumper" :page-count="pageData.totalPage"
                       :total="pageData.total" @size-change="sizeChange" @current-change="pageChange">
        </el-pagination>
      </div>
    </el-main>
  </el-container>

  <!-- 使用批量删除组件 -->
  <BatchDelete
      v-model:visible="batchDeleteDialogVisible"
      :selected-items="selectedRows"
      delete-url="/role/delete"
      id-field="id"
      @delete-success="handleBatchDeleteSuccess"
  />

  <save-dialog v-if="dialog.save" ref="saveDialogId" @success="handleSaveSuccess"
               @closed="dialog.save=false"></save-dialog>

  <permission-dialog v-if="dialog.permission" ref="permissionDialogId"
                     @closed="dialog.permission=false"></permission-dialog>

</template>

<script setup>
import saveDialog from './save.vue'
import permissionDialog from './permission.vue'
import {Delete, Plus, Search} from '@element-plus/icons-vue'
import BatchDelete from "@/components/BatchDelete.vue";
import {ElMessage} from "element-plus";
import {useDelete} from "@/utils/useDelete.js";
import {usePage} from "@/utils/usePage.js";
import {nextTick, ref} from "vue";
import {defineStore} from "pinia";
import http from "@/utils/request.js";

const searchStore = defineStore('roleStore', {

  state: () => {
    return {
      searchObject: {
        no: 1,
        size: 10,
        sortField: "id",
        sortMethod: "desc",
        shop: '',
        name: '',
        productCatalog: '',
        productGroup: ''
      }
    }
  }
})

const dialog = ref({
  save: false,
  permission: false
})

const saveDialogId = ref(null);
const permissionDialogId = ref(null);

const add = () => {
  dialog.value.save = true
  nextTick(() => {
    saveDialogId.value.open()
  })
}

const {searchObject} = searchStore();
const {
  pageData,
  sizeChange,
  pageChange,
  search,
  searchList,
  changeTableSort,
  loading
} = usePage("/role/search", searchObject);



const handleSaveSuccess = (data, mode) => {
  if (mode === 'create') {
    search();
  } else if (mode === 'update') {
    searchList();
  }
}

const table_edit = (row) => {
  dialog.value.save = true
  nextTick(() => {
    saveDialogId.value.open('update').setData(row)
  })
}

const table_show = (row) => {
  dialog.value.save = true
  nextTick(() => {
    saveDialogId.value.open('show').setData(row)
  })
}





// 批量删除相关
const selectedRows = ref([]);
const batchDeleteDialogVisible = ref(false);

const table_del = async (row) => {
  const reqData = {id: row.id};
  const res = await http.post("/role/delete", reqData);
  if (res.code === 200) {
    await searchList();
    ElMessage.success("删除成功");
  } else {
    ElMessage.warning(res.msg);
  }
}

const permission = () => {
  dialog.value.permission = true
  nextTick(() => {
    let roleId = selectedRows.value[0].id;
    permissionDialogId.value.open(roleId)
  })
}

// 处理表格选择变化
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};

// 显示批量删除对话框
const showBatchDeleteDialog = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请至少选择一条数据');
    return;
  }
  batchDeleteDialogVisible.value = true;
};

// 处理批量删除成功
const handleBatchDeleteSuccess = (result) => {
  if (result.success > 0) {
    // 刷新列表
    search();
    // 清空选中
    selectedRows.value = [];
  }
};

</script>

<style scoped>

.right-panel-search {
  display: flex;
  align-items: center;
}

.right-panel-search > * + * {
  margin-left: 10px;
}

.left-panel {
  display: block;
}

.right-panel {
  display: block;
  margin-top: 15px;
}

.el-header {
  background: #fff;
  border-bottom: 1px solid var(--el-border-color-light);
  padding: 13px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-header .left-panel {
  display: flex;
  align-items: center;
}

.el-header .right-panel {
  display: flex;
  align-items: center;
}
</style>
